//layout
.sh.layout,.sh.container{ margin: 0 auto;position:relative;overflow: visible;}
.sh.container{ width: 66.6%}
.sh.layout{ width: 100%}

//Flexible Box
$i: 16;
@while $i > 0 {
  .sh.f#{$i}{ flex: $i}
  $i: $i - 1;
}

.sh.flex{ display: flex; display:-webkit-box; display: -webkit-flex; justify-content: flex-start;flex-wrap: wrap; align-items: stretch;align-content:flex-start;  }

//columns
$i: 16;
@while $i > 0 {
  .sh.flex.column#{$i}{
    position: relative;overflow: visible;
    >.sh.column{ flex: 0 0 1/$i*100%; display:flex; position: relative;
      .sh.item{ position: relative;width: 100%}
    }
    .row{ width: 100%}
  }
  $i: $i - 1;
}

/* Response  */
@media screen and (max-width: 1280px){
    .sh.container{ width: 100%}
}

/*computer*/
@media only screen and (min-width: 981px){
    $i: 16;
    @while $i > 0 {
        .sh[class*="computer column#{$i}"]{
            >.column{ flex: 0 0 1/$i*100% !important;}
        }
        .sh[class*="computer f#{$i}"]{
            flex: $i !important;
        }
        $i: $i - 1;
    }

}

/*tablet*/
@media only screen and (max-width: 980px) and (min-width: 768px){
    $i: 16;
    @while $i > 0 {
        .sh[class*="tablet column#{$i}"]{
            >.column{ flex: 0 0 1/$i*100% !important;}
        }
        .sh[class*="tablet f#{$i}"]{
            flex: $i !important;
        }
        $i: $i - 1;
    }

}

/*mobile*/
@media only screen and (max-width: 767px){
    $i: 16;
    @while $i > 0 {
        .sh[class*="mobile column#{$i}"]{
            >.column{ flex: 0 0 1/$i*100% !important;}
        }
        .sh[class*="mobile f#{$i}"]{
            flex: $i !important;
        }
        $i: $i - 1;
    }

}



//list-items
.sh.list-items{
  list-style: none;
  > *{ border-bottom: 1px #CCC solid;
    ul { display: none}
  }
}

//topNav
.sh.topNav{
  .sh.column{
    display: block !important; position: relative;
    > ul{
      li:first-child{ border-top:0}
    }
    .sh.item{
      @extend .jc-center,.ai-center;
    }
    ul{ display: none}
  }

  //link dropDown
  .sh.link.column{
    > ul{
      ul{
         @extend .row.border;
         position: absolute;top:-1px
      }
    }
  }
}

/*waterfallFlow 瀑布流布局*/
.sh.waterfallFlow{
  position: relative; margin:10px;height: 100%;
  .sh.column{ position: absolute;;
    .sh.item{ margin: 10px;border:1px orange solid}
  }
}
